import React from 'react';
import { createRoot } from 'react-dom/client';
/**
 * 编写一个高阶组件函数
 * @param {*} OldComponent接收一个老组件  Show
 * @returns 返回一个新组件 ShowWithMouseTracker
 */
function withMouseTracker(OldComponent) {
    return class MouseTracker extends React.Component {
        //给当前的类组件实例添加一个状态，状态是一个对象x=0,y=0
        state = { x: 0, y: 0 }
        handleMouseMove = (event) => {
            //当我们在DIV移动鼠标的时候，会触发mousemove事件，执行此方法
            //获取鼠标最新的x和y坐标，然后修改并同步状态，改完后页面会自动更新
            this.setState({ x: event.clientX, y: event.clientY });
        }
        render() {
            return (
                <div onMouseMove={this.handleMouseMove}>
                    <OldComponent {...this.state} />{/*把当前组件的状态对象展开后作为属性传递给老组件*/}
                </div>
            )
        }
    }
}
function Show(props) {//老组件可以获取到props对象{x,y}
    return (
        <React.Fragment>
            <h1>请移动鼠标试试</h1>
            <p>当前鼠标的位置是{props.x}:{props.y}</p>
        </React.Fragment>
    )
}
const ShowWithMouseTracker = withMouseTracker(Show);
let element = <ShowWithMouseTracker />
let root = createRoot(document.getElementById('root'))
root.render(element);
